<template>
  <el-dialog :title="title" :visible.sync="show" width="800px">
    <div class="base-modal-content">
      <div class="mar-b-12 phone-desc">{{rechargeTip[type]}}</div>
      <div class="pay-box">
        <div v-for="(item, index) in items" :key="index" class="item" :class="{'active': index == current}" @click="choose(index,item)">
          <div class="num">{{item.count}}<span>{{item.unit}}</span></div>
          <div :class="[item.priceClassName ? item.priceClassName : 'price']">{{item.price}}</div>
          <div :class="['desc', {'rec-btn': index===0}]">
            <span>{{item.desc}}</span>
          </div>

          <div class="current-price" v-if="item.currentPrice">
            <span>{{item.currentPrice}}</span>
          </div>
        </div>
      </div>
      <div class="pay-detail">
        <h5>支付方式</h5>
        <div class="pay-container">
          <span class="pay-way" :style="zhifubaoImage"></span>
        </div> 
        <p class="tip">*如需发票，请凭支付截图联系客服。</p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="pay" :disabled="pending">充 值</el-button>
    </div>
  </el-dialog>
</template>

<script>
import platform from '@src/platform'
import { getLocalesOssUrl } from '@src/util/assets'
const zhifubaoImage = `background-image: url(${getLocalesOssUrl('/common/zhifubao.png')})`
import { t } from '@src/locales'
import {getRootWindowInitData} from "@src/util/window";
import qs from "qs";
import dingTalk from "@src/util/dingtalk";
import * as SettingApi from '@src/api/SettingApi';
import {
  getRootWindow
} from '@src/util/dom';
const rechargeTip = {
  'call_time' : t('common.base.rechargeModel.phoneDesc'), //电话消息充值
  'smsRecharge': t('common.base.rechargeModel.smsDes'), //短信充值
}
export default {
  name: 'sms-pay',
  data() {
    return {
      type: '',
      packCode: '',
      inDingTalk: dingTalk.inDingTalk,
      zhifubaoImage,
      pending: false,
      show: false,
      items: [],
      current: 0,
      selected: {},
      rechargeTip,
    }
  },
  computed:{
    // 0：钉钉端，1：自建，2：企微端
    tenantType() {
      return getRootWindowInitData().tenantType
    },
  },
  props:{
    title:{
      type:String,
      default:'短信充值'
    }
  },

  methods: {
    choose(index,item){
      this.current = index
      this.selected = item
    },
    // 钉钉支付
    async dingTalkPay(id) {
      try {
        const DingTalkPC =  getRootWindow(window).DingTalkPC;
        if(!this.inDingTalk) {
          this.$message.warning(t('common.base.rechargeModel.rechargeTip'))
          return;
        }
        let url = await SettingApi.dingPurchases({
          commodityCode: this.type,
          packCode: this.packCode,
          specCode: id
        })
        this.show = false;
        DingTalkPC.biz.util.openSlidePanel({
          url, //打开侧边栏的url
          onSuccess : function(result) {
            console.log(result)
          },
          onFail : function(err) {
            console.log(err)
          }
        })
      } catch (e) {
        console.error(e)
      }
    },

    async pay(){
      try {
        this.pending = true;
        const { id } = this.selected
        if(this.tenantType !== 0) {  //非钉钉支付
          let param = {
            commodityCode: this.type,
            packCode: this.packCode,
            specCode:id,
          }
          platform.openLink(`/api/paycenter/outside/page/commodity/alipay?${qs.stringify(param)}`)
        }else {
          await this.dingTalkPay(id)
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.pending = false;
      }
    },
    openDialog({commodityCode, packCode}, list = []) {
      this.show = true;
      this.packCode = packCode;
      this.type = commodityCode;
      if(list?.length){
        this.items = list
        this.selected = this.items[0]
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-dialog__headerbtn {
  top: 0!important;
}
::v-deep {
  .el-dialog__body{
    padding:24px 20px;
  }
}
.pay-box {
  display: flex;
  justify-content: space-between;
  .item {
    width:245px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E8E8E8;
    cursor: pointer;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    position: relative;
  }
  .tag{
    position: absolute;
    top:0;
    right:0;
    height: 28px;
    line-height: 28px;
    background: linear-gradient(109deg, rgba(255, 104, 87, 0.06) 0%, rgba(254, 48, 58, 0.06) 100%);
    border-radius: 4px 0px 4px 4px;
    padding:0 8px;
    font-size: 14px;
    color: #FF6857;
  }
}

.pay-box .item.active {
  color: $text-color-primary;
  background: linear-gradient(180deg, #FEFBF5 0%, #FCF6E7 100%);
  border-radius: 4px;
  border-color: transparent;
  &::before{
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #EABB6A;
    border-radius: 4px;
  }
}

.pay-detail {
  padding: 44px 0 0;
  .pay-container {
    display: flex;
    align-items: center;
    margin-top:24px;
  }
  h5 {
    color: $text-color-primary;
    height: 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
  }
  .pay-way {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 54px;
    border-radius: 8px;
    i {
      color: #fff;
      font-size: 50px;
    }
    background-size:contain;
  }
  .pay-name {
    font-size: 26px;
    margin-left: 19px;
    color:#333;
  }
  .tip {
    height: 22px;
    font-size: 14px;
    color: $text-color-secondary;
    line-height: 22px;
    margin-top: 12px;
  }
}
.current-price{
  position: absolute;
  top: 0;
  left: 0px;
  height: 28px;
  background: linear-gradient(109deg, #FF6857 0%, #FE303A 100%);
  border-radius: 4px 14px 14px 0;
  span {
    height: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 28px;
    padding: 0 8px;
  }
}
.num {
  margin-top: 36px;
  height: 32px;
  font-size: 24px;
  font-weight: 500;
  color: $text-color-primary;
  line-height: 32px;
  margin-bottom: 0;
  span {
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: $text-color-regular;
    line-height: 22px;
    margin-left:2px;
  }
}
.price {
  height: 32px;
  font-size: 20px;
  font-weight: 500;
  color: #FF7043;
  line-height: 32px;
  margin-bottom: 14px;
}
.gray-text{
  font-size: 14px;
  color: #595959;
  line-height: 20px;
  margin:4px 0 28px;
}
.desc {
  height: 40px;
  line-height: 40px;
  background: linear-gradient(117deg, #F4DBB1 0%, #E9BB6D 100%);
  margin: 12px;
  border-radius: 4px;
  span {
    height: 24px;
    font-size: 16px;
    font-weight: 400;
    color: #402200;
    line-height: 24px;
  }
}
.rec-btn{
  background: linear-gradient(117deg, #EBEBEB 0%, #D5D5D5 100%);
}
.phone-desc {
  height: 24px;
  font-size: 16px;
  font-weight: 400;
  color: $text-color-regular;
  line-height: 24px
}
</style>